import { h, fragment } from '@knno/dom/jsx';
import { Navigator, UINavigator } from '@knno/ui/jsx/navigator';
import { Button } from '../../../dist/jsx/button';
import { borderStyle } from '../../../dist/components/global.css';
import { bar } from './index.css';
import { TitleBar } from '@knno/ui/jsx/titleBar';

function NewPage() {
	const id = Math.floor(Math.random() * 1000);
	return (
		<>
			<TitleBar title={`新窗口${id}`} />
			<div style={{ fontSize: '3em', flex: '1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
				Page: {id}
			</div>
		</>
	);
}

export function ShowNavigator() {
	let navi: UINavigator;
	return (
		<>
			<h2>窗口导航</h2>
			<Navigator retainLastPage={true} ref={(elem) => (navi = elem)} class={borderStyle} style={{ height: '300px' }}>
				<div style={{ fontSize: '3em', flex: '1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
					一些背景内容
				</div>
			</Navigator>
			<div class={bar}>
				<Button
					text="压入新窗口"
					onclick={() => {
						navi.pushPage(NewPage());
					}}
				/>
				<Button
					text="弹出顶层窗口"
					onclick={() => {
						navi.popPage();
					}}
				/>
				<Button
					text="弹出所有窗口"
					onclick={() => {
						navi.popPage(0);
					}}
				/>
				<Button
					text="压入新窗口替换所有窗口"
					onclick={() => {
						navi.pushPage(NewPage(), 0);
					}}
				/>
				<Button
					text="插入新窗口到最下方"
					onclick={() => {
						navi.addPage(NewPage(), 0);
					}}
				/>
				<Button
					text="插入新窗口到最上方"
					onclick={() => {
						navi.addPage(NewPage());
					}}
				/>
			</div>
		</>
	);
}
